<template>
  <div style="padding: 5px;">
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="174px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['Email', 'Union', 'Video']
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value',
            splitNumber: 3,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            }
          },
          grid: {
            left: "12%",
            bottom: "20%",
            width: "80%"
          },
          series: [
            {
              name: 'Email',
              type: 'line',
              data: [150, 132, 101, 134, 90, 230, 610]
            },
            {
              name: 'Union',
              type: 'line',
              data: [620, 182, 191, 234, 290, 330, 710]
            },
            {
              name: 'Video',
              type: 'line',
              data: [350, 232, 201, 154, 190, 330, 510]
            },
          ]
        };
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
